<template>
  <div class="sendDialog" ref="sendDialog">
    <a-modal
      :getContainer="() => $refs.sendDialog"
      v-model:visible="visible"
      title="发送报告"
      @ok="handleOk"
      width="850px"
      ok-text="确认发送"
      cancel-text="取消"
    >
      <div class="choice_area">
        <div class="tabs flex">
          <div
            class="choice_item"
            :class="{ active: activeId === item.id }"
            v-for="(item, index) in choiceData"
            :key="index"
            @click="handleTab(item.id)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="tab_content">
          <component :is="componentName" />
        </div>
      </div>
      <div class="send_info"></div>
    </a-modal>
  </div>
</template>
<script>
import ChoiceUser from "./components/ChoiceUser.vue";
import ChoiceJobs from "./components/ChoiceJobs.vue";
import ChoiceDepartment from "./components/ChoiceDepartment.vue";
export default {
  data() {
    return {
      componentName: "ChoiceUser",
      activeId: 1,
      visible: false,
      choiceData: [
        { id: 1, name: "选择用户" },
        { id: 2, name: "选择部门" },
        { id: 3, name: "选择岗位" },
      ],
    };
  },
  components: { ChoiceUser, ChoiceJobs, ChoiceDepartment },
  created() {},
  mounted() {},
  methods: {
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    showDialog() {
      this.visible = true;
    },
    handleTab(id) {
      if (id === this.activeId) {
        return;
      }
      this.activeId = id;
      const componentNameList = [
        "ChoiceUser",
        "ChoiceDepartment",
        "ChoiceJobs",
      ];
      this.componentName = componentNameList[this.activeId - 1];
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.sendDialog {
  /deep/ .ant-modal-content {
    background: transparent;
  }
  /deep/ .ant-modal-content {
    background: transparent;
  }
  /deep/.ant-modal-footer {
    background: #fff;
  }
  /deep/.ant-modal-body {
    padding: 0;
  }
}

.choice_area {
  width: auto;
  height: 589px;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.send_info {
  margin-top: 4px;
  width: 100%;
  height: 195px;
  background-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.tabs {
  height: 55px;
}
.choice_item {
  width: 100px;
  text-align: center;
  color: #6b7785;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 55px;
  cursor: pointer;
  &.active {
    color: #0093ff;
  }
}
.tab_content {
  padding: 0 20px;
}
</style>
